<!--  -->
<template>
  <div class="">
    <a-card class="search-wrapper">
      <div class="search-form-wrapper" ref="search">
        <a-form layout="inline">
          <a-row :gutter="48">

        

            <a-col :md="4" :sm="24" v-if="userInfo.name == 'admin'">
              <a-form-item label="渠道" v-model="queryParam.name" > 
                <a-select v-model="queryParam.name" allow-clear >
                  <a-select-option  value="baoxue">baoxue</a-select-option>
                  <a-select-option  value="rongyao">rongyao</a-select-option>
                  <a-select-option  value="shandi">shandi</a-select-option>
                  <a-select-option  value="btShorts">btShorts</a-select-option>
                </a-select>
              </a-form-item> 
            </a-col>

            <a-col :md="4" :sm="24" >
              <a-form-item label="活动" v-model="queryParam.activityId" > 
                <a-select v-model="queryParam.activityId" allow-clear >
                  <a-select-option  value="">全部</a-select-option>
                  <a-select-option  value="lottery">lottery</a-select-option>
                  <a-select-option  value="recruit">recruit</a-select-option>
                  <a-select-option  value="drainage">drainage</a-select-option>
                  <a-select-option  v-if="userInfo.name == 'admin'"  value="btshort">btshorts</a-select-option>
                </a-select>
              </a-form-item> 
            </a-col>
            
            <a-col :md="4" :sm="24">
              <a-form-item label="来源" v-model="queryParam.ref" > 
                <a-select v-model="queryParam.ref" allow-clear >
                  <a-select-option  value="">全部</a-select-option>
                  <a-select-option  value="fbclid">FackBook</a-select-option>
                  <a-select-option  value="ttclid">TikTok</a-select-option>
                  <a-select-option v-if="userInfo.name == 'admin'" value="btshort">btShorts</a-select-option>
                </a-select>
              </a-form-item> 
            </a-col>

            <a-col :md="6" :sm="24">
              <a-form-item label="日期">
                  <el-date-picker
                  v-model="times"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right">
                </el-date-picker>
              </a-form-item>
            </a-col> 
              <a-col :md="4" :sm="24">
              <a-form-item label="维度">
                <a-select v-model="queryParam.dimension" allow-clear >
                  <a-select-option value="day">按天</a-select-option>
                  <a-select-option value="hours">按小时</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> 
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="loadData">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
 
    <a-card class="table-wrapper">
      <a-col :md="10" :sm="24">

        <div class="statistics-container">

            <div class="statistics-item">
 

              <span class="statistics-label">首页访问用户数: </span>
              <span class="statistics-value">{{totalIndexUserCount}}</span>
            </div>

            <div class="statistics-item">
              <span class="statistics-label">活动页访问用户数:</span>
              <span class="statistics-value">:{{totalLotteyUserCount}}</span>
            </div>

            <div class="statistics-item">
              <span class="statistics-label">付款成功用户数:</span>
              <span class="statistics-value">{{totalPaySuccessUserCount}}</span>
            </div>
            <div class="statistics-item">
              <span class="statistics-label">付款总金额:</span>
              <span class="statistics-value">{{totalPaySuccessUserCount * 49}} PH</span>
            </div>
          </div>
        <div id="conversion-statics" style="width: 100%; height: 400px;"></div>

      </a-col>
      <a-col :md="3" :sm="24"></a-col>
      <a-col :md="10" :sm="24">
        <div class="statistics-container">

          <div class="statistics-item">
            <span class="statistics-label">首页访问次数:</span>
            <span class="statistics-value">{{totalIndexVisitCount}}</span>
          </div>

          <div class="statistics-item">
            <span class="statistics-label">活动页访问次数:</span>
            <span class="statistics-value">:{{totalLotteyVisitCount}}</span>
          </div>

          <div class="statistics-item">
            <span class="statistics-label">付款成功访问次数:</span>
            <span class="statistics-value">{{totalPaySuccessVisitCount}}</span>
          </div>
          </div>
        <div id="flow-statics" style="width: 100%; height: 400px;"></div>
        </a-col>
    </a-card>
  </div>
</template>

<script>
import {flowStatic} from '@/api/track'
import { DatePicker } from 'element-ui';
import { mapState } from 'vuex'
import storage from 'store'
import 'element-ui/lib/theme-chalk/index.css';
import * as echarts from 'echarts';



export default {
  components: {
    'el-date-picker': DatePicker
  },
  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      times:'',
      myChart:'',
      flowChar:'',
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
          
      options : {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: []
      },

      tableLoading: false,
      queryParam: {
        name: '',
        ref:'',
        activityId:'',
        dimension:'day',
        start: '',
        end:'',
      },
      totalIndexUserCount:0,
      totalLotteyUserCount:0,
      totalPaySuccessUserCount:0,
      
      totalIndexVisitCount:0,
      totalLotteyVisitCount:0,
      totalPaySuccessVisitCount:0,
      
      tabbarHeight: 420,
    }
  },

  computed:{
    ...mapState({
      userInfo: (state) => state.user.info
    })
  },

  created(){
    this.times = this.getLastMonthRange();
    this.queryParam.name = this.userInfo.name == 'admin'? 'btShorts' : '';
  },
  mounted() {
    this.$nextTick(() => {
      var chartDom = document.getElementById('conversion-statics');
      this.myChart = echarts.init(chartDom);

      var flowCharDom = document.getElementById('flow-statics');
      this.flowChar = echarts.init(flowCharDom)
      this.loadData()
    });


  },
  methods: {
    loadData() {
      this.tableLoading = true
      this.queryParam.start= this.times[0];
      this.queryParam.end= this.times[1];  

      this.myChart.clear();
      let converOptions = JSON.parse(JSON.stringify(this.options));
      converOptions.title.text = '用户转化统计';

      this.flowChar.clear();
      let flowOptions = JSON.parse(JSON.stringify(this.options));
      flowOptions.title.text = '用户流量统计';
      flowStatic({ ...this.queryParam })
        .then((res) => {
          this.tableLoading = false
          converOptions.legend.data = res.data.flow.legend;
          converOptions.xAxis.data =  res.data.flow.xaxis;
          converOptions.series = res.data.flow.series; 
          this.myChart.setOption(converOptions); 

          this.totalIndexUserCount =  res.data.flow.totalIndexVisit ;
          this.totalLotteyUserCount = res.data.flow.totalLotteyVisit;
          this.totalPaySuccessUserCount = res.data.flow.totalPaySuccessVisit;       

          flowOptions.legend.data = res.data.transform.legend;
          flowOptions.xAxis.data =  res.data.transform.xaxis;
          flowOptions.series =  res.data.transform.series; 
          this.flowChar.setOption(flowOptions); 
          
          this.totalIndexVisitCount = res.data.transform.totalIndexVisit ;
          this.totalLotteyVisitCount = res.data.transform.totalLotteyVisit;
          this.totalPaySuccessVisitCount = res.data.transform.totalPaySuccessVisit;    
          
          

        }).catch(() => {
          this.tableLoading = false
          this.totalIndexUserCount =  0;
          this.totalLotteyUserCount = 0;
          this.totalPaySuccessVisitCount =  0;

          this.totalIndexVisitCount = 0;
          this.totalLotteyVisitCount = 0;
          this.totalPaySuccessVisitCount = 0;    
          
        });
        
    },

    getLastMonthRange() {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        return [start.Format("yyyy-MM-dd"), end.Format("yyyy-MM-dd")];
      }
  }
}
</script>

<style lang="less" scoped>
/* 包含统计结果的容器样式 */
.statistics-container {
  padding: 5px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 统计项容器 */
.statistics-item {
  margin: 0 20px; /* 调整左右间距 */
  font-size: 14px; /* 调整字体大小 */
}

/* 文字部分样式 */
.statistics-label {
  font-weight: bold;
  color: #555;
  margin-right: 8px; /* 文字和数字之间的间距 */
}

/* 数字部分样式 */
.statistics-value {
  font-weight: bold;
  color: #007bff;
}


</style>
